<template>
  <div class="fab-container">
    <div 
      class="fab-button"
      :class="[`fab-${type}`, { 'fab-open': isOpen }]"
      @click="toggleFab"
    >
      <el-icon class="fab-icon">
        <component :is="isOpen ? 'Close' : icon" />
      </el-icon>
    </div>
    
    <div v-if="isOpen" class="fab-menu">
      <div 
        v-for="(action, index) in actions" 
        :key="action.id"
        class="fab-action"
        :style="{ 
          animationDelay: `${index * 0.1}s`,
          '--action-color': action.color 
        }"
        @click="handleActionClick(action)"
      >
        <div class="action-icon">
          <el-icon>
            <component :is="action.icon" />
          </el-icon>
        </div>
        <span class="action-label">{{ action.label }}</span>
      </div>
    </div>
    
    <!-- 背景遮罩 -->
    <div 
      v-if="isOpen" 
      class="fab-backdrop"
      @click="closeFab"
    ></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

/**
 * 浮动操作按钮组件
 * @description 提供带动画效果的浮动操作按钮，支持多个快捷操作
 * @param {string} type - 按钮类型：primary(默认)、success、warning、danger
 * @param {string} icon - 主按钮图标
 * @param {Array} actions - 操作列表
 * @emits {Object} action - 点击操作时触发
 */
const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'warning', 'danger'].includes(value)
  },
  icon: {
    type: String,
    default: 'Plus'
  },
  actions: {
    type: Array,
    default: () => [
      {
        id: 'publish',
        label: '发布委托',
        icon: 'Edit',
        color: '#667eea'
      },
      {
        id: 'scan',
        label: '扫码接单',
        icon: 'Scan',
        color: '#4facfe'
      },
      {
        id: 'search',
        label: '快速搜索',
        icon: 'Search',
        color: '#fa709a'
      }
    ]
  }
})

const emit = defineEmits(['action'])
const isOpen = ref(false)

/**
 * 切换浮动按钮状态
 */
const toggleFab = () => {
  isOpen.value = !isOpen.value
}

/**
 * 关闭浮动按钮
 */
const closeFab = () => {
  isOpen.value = false
}

/**
 * 处理操作点击事件
 * @param {Object} action - 操作对象
 */
const handleActionClick = (action) => {
  emit('action', action)
  closeFab()
}
</script>

<style scoped>
.fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

.fab-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1001;
}

.fab-icon {
  font-size: 24px;
  color: white;
  transition: transform 0.3s ease;
}

.fab-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.fab-button.fab-open .fab-icon {
  transform: rotate(45deg);
}

/* 按钮类型样式 */
.fab-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.fab-success {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.fab-warning {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.fab-danger {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.fab-menu {
  position: absolute;
  bottom: 70px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fab-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: fadeInUp 0.3s ease both;
  white-space: nowrap;
}

.fab-action:hover {
  transform: translateX(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--action-color);
  color: white;
  font-size: 16px;
}

.action-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.fab-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .fab-container {
    bottom: 16px;
    right: 16px;
  }
  
  .fab-button {
    width: 48px;
    height: 48px;
  }
  
  .fab-icon {
    font-size: 20px;
  }
  
  .fab-menu {
    bottom: 60px;
    gap: 12px;
  }
  
  .fab-action {
    padding: 10px 14px;
  }
  
  .action-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .action-label {
    font-size: 13px;
  }
}
</style> 